import { Link } from 'react-router-dom';
import { history } from '@/.umi/core/history';
import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Button,
  Form,
  Radio,
} from 'antd';
import moment from 'moment';
import { format } from 'prettier';
import React, { useState } from 'react';
import request from '@/http';
import All_style from '../../index.less';
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    /**无 */
    title: '请假提交日期',
    dataIndex: 'work_pubtime',
    key: 'work_pubtime',
  },
  {
    title: '主题',
    dataIndex: 'vacation_theme',
    key: 'vacation_theme',
  },
  {
    title: '请假原因',
    dataIndex: 'vacation_reason',
    key: 'vacation_reason',
  },
  {
    title: '原因说明',
    dataIndex: 'vacation_explain',
    key: 'vacation_explain',
  },
  {
    title: '请假开始时间',
    dataIndex: 'vacation_begindate',
    key: 'vacation_begindate',
  },
  {
    title: '请假结束时间',
    dataIndex: 'vacation_enddate',
    key: 'vacation_enddate',
  },
  {
    title: '审批状态',
    dataIndex: 'vacation_status',
    key: 'vacation_status',
  },
  {
    title: '操作',
    key: 'action',
    render: (row: any) => (
      <>
        {row.vacation_status === '审批不通过' ? (
          <>
            {/* <Button
              type="link"
              onClick={() => {
                history.push(
                  `/student/LeaveManagement/LeaveDetailsts`
                ,{id:row?.id});
              }}
            >
              详情
            </Button> */}
            <Link
              to={{
                pathname: '/student/LeaveManagement/LeaveDetailsts',
                state: { id: row.id },
              }}
            >
              详情
            </Link>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Link
              to={{
                pathname: '/student/LeaveManagement/LeaveEdit',
                state: { id: row.id },
              }}
            >
              编辑
            </Link>
            <br></br>
            <Link
              to={{
                pathname: '/student/LeaveManagement/LeaveReason',
                state: { id: row.id },
              }}
            >
              不通过原因
            </Link>
          </>
        ) : (
          <>
            <Link
              to={{
                pathname: '/student/LeaveManagement/LeaveDetailsts',
                state: { id: row.id },
              }}
            >
              详情
            </Link>
          </>
        )}
      </>
    ),
  },
];
const dataOld = [
  {
    id: '',
    key: '1',
    work_pubtime: '2021-6-8',
    course_name: 'java',
    vacation_theme: '事假',
    vacation_reason: '事假',
    vacation_explain: '有事',
    vacation_begindate: '2021-6-2',
    vacation_enddate: '2021-9-7',
    vacation_status: '审批不通过',
    active: '详情',
  },
];
const Leave = (props: any) => {
  const [data, setData] = React.useState(dataOld);
  /*查询接口 */
  const [formObject] = Form.useForm();
  const [captchaUrl, setCaptchaUrl] = React.useState('');
  interface pageInfoTypes {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page:any, pageSize:any) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pageInfoTypes>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });
  const loadData = async (current:any, pageSize:any) => {
    const datas = await formObject.validateFields();
    const LeaveSelectResult: any = await request.post(
      '/ask_for_leave/student/ask/all1',
      {
        page: current,
        number: pageSize,

        ...datas,
        vacationEndDate: datas?.vacationSubmitDate
          ? datas?.vacationSubmitDate[1]?.format('YYYY-MM-DD HH:mm:ss')
          : '',
        vacationBeginDate: datas?.vacationSubmitDate
          ? datas?.vacationSubmitDate[0]?.format('YYYY-MM-DD HH:mm:ss')
          : '',
      },
    );
    if (LeaveSelectResult.success) {
      let selectData = LeaveSelectResult.data.returnDate.map((dNew:any) => {
        return {
          id: dNew.id,
          key: `key_{dNew.id}`,
          work_pubtime: dNew.vacationSubmitDate,
          vacation_theme: dNew.vacationTheme,
          vacation_reason: dNew.vacationReason,
          vacation_explain: dNew.vacationExplain,
          vacation_begindate: dNew.vacationBeginDate,
          vacation_enddate: dNew.vacationEndDate,
          vacation_status: dNew.vacationStatus,
        };
      });
      setData(selectData);
      setPageInfo({
        current: LeaveSelectResult?.data?.paginationData?.currentPage,
        pageSize: LeaveSelectResult?.data?.paginationData?.number,
        total: LeaveSelectResult?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
    }
  };
  const onReset = () => {
    formObject.resetFields();
    loadData(pageInfo.current, pageInfo.pageSize);
  };

  React.useEffect(() => {
    loadData(pageInfo.current, pageInfo.pageSize);
  }, []);

  return (
    <div className={All_style.box}>
      <Form name="SelectLeaveForm" form={formObject} preserve={false}>
        <div>
          <Form.Item
            name="vacationSubmitDate"
            label="申请提交日期："
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <RangePicker className={All_style.select} />
          </Form.Item>

          <Form.Item
            name="vacationStatus"
            label="审批状态："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select className={All_style.select} placeholder="请选择">
              <Option className={All_style.option} value="审批中">
                审批中
              </Option>
              <Option className={All_style.option} value="审批不通过">
                审批不通过
              </Option>
              <Option className={All_style.option} value="审批通过">
                审批通过
              </Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="vacationReason"
            label="请假原因："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select className={All_style.select} placeholder="请选择">
              <Option className={All_style.option} value="事假">
                事假
              </Option>
              <Option className={All_style.option} value="病假">
                病假
              </Option>
              <Option className={All_style.option} value="其他">
                其他
              </Option>
            </Select>
          </Form.Item>

          <div style={{ clear: 'both' }}>
            <Form.Item
              name="vacationTheme"
              label="主题"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input placeholder="请输入" className={All_style.select} />
            </Form.Item>

            <Button
              className={All_style.button}
              onClick={() => {
                loadData(pageInfo.current, pageInfo.pageSize);
              }}
            >
              查询
            </Button>

            <Button
              className={All_style.button2}
              htmlType="button"
              onClick={onReset}
            >
              重置
            </Button>
          </div>
        </div>
      </Form>

      <div style={{ clear: 'both' }}>
        <Link to="/student/LeaveManagement/addLeave">
          <Button className={All_style.button}>+新增请假</Button>
        </Link>

        <Table
          columns={columns}
          dataSource={data}
          // rowKey={(record) => {
          //   return record?.id + Date.now(); //在这里加上一个时间戳就可以了
          // }}
          className={All_style.table}
          pagination={pageInfo}
        />
      </div>
    </div>
  );
};
export default Leave;
